<template>
  <WsmTable
    ref="table"
    load-url="/dbms-server/base/interlang/page"
    :change-load="true"
    :offset-height="80"
    v-model="queryFormType"
  >
    <template #title>{{ t('dbms.interLang.title') }}</template>
    <template #button="{ row }">
      <el-button type="primary" v-hasPermi="'add'" @click="addForm.show()">{{
        t('common.add')
      }}</el-button>
      <template v-if="row">
        <el-button v-hasPermi="'update'" @click="update(row.lang)" type="primary">{{
          t('common.update')
        }}</el-button>
        <el-button v-hasPermi="'delete'" @click="del(row.lang)" type="danger">{{
          t('common.delete')
        }}</el-button>
        <el-button v-hasPermi="'front'" @click="front(row.lang)" type="success">{{
          t('dbms.interLang.front')
        }}</el-button>
      </template>
    </template>
    <template #column>
      <el-table-column prop="lang" :label="t('dbms.interLang.lang')" width="180" />
      <el-table-column prop="langName" :label="t('dbms.interLang.langName')" />
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/dbms-server/base/interlang/add"
    label-width="100px"
    :title="t('dbms.interLang.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="lang" :label="t('dbms.interLang.lang')">
            <el-input v-model="form.lang" :placeholder="t('dbms.interLang.lang')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="langName" :label="t('dbms.interLang.langName')">
            <el-input v-model="form.langName" :placeholder="t('dbms.interLang.langName')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/interlang/get"
    label-width="100px"
    submit-url="/dbms-server/base/interlang/update"
    :title="t('dbms.interLang.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="langName" :label="t('dbms.interLang.langName')">
            <el-input v-model="form.langName" :placeholder="t('dbms.interLang.langName')" />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="frontForm"
    v-model="frontData"
    load-url="/dbms-server/base/interfront/get"
    label-width="100px"
    label-position="top"
    submit-url="/dbms-server/base/interfront/update"
    :title="t('dbms.interLang.updateFrontTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="langConfig" :label="t('dbms.interLang.langConfig')">
            <CodeInput
              v-model="form.langConfig"
              :code-style="{ height: '400px', width: '100%' }"
              code="javascript"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType } from '@/components/WsmTable/src/types'
import { delApi } from '@/api/dbms/interlang'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { CodeInput } from '@/components/CodeMirror'

const { t } = useI18n()

//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const addData: FormDataType = {
  lang: '',
  langName: ''
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  lang: '',
  langName: ''
}

//前端配置
const frontForm = ref()
const frontData: FormDataType = {
  lang: '',
  langConfig: ''
}

//查询定义
const queryFormType: QueryFormType = {}

const update = (lang: string) => {
  updateForm.value.show({ lang })
}

const front = (lang: string) => {
  frontForm.value.show({ lang })
}

const del = async (lang: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi({ lang })
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
